@import "../../styles/mixin.scss";

.join_item {
  @include wh(642px, 468px);
  @include shadow();
  border-radius: $radius;
  position: relative;
  margin-top: 60px;

  .image_container {
    @include wh(642px, 302px);
    border-radius: $radius $radius 0 0;

    .image {
      @extend .image_container;
    }

    .mask {
      @extend .image_container;
      background: rgba(0, 0, 0, 0.19);
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .join_txt {
    padding: 32px 38px;
    height: 166px;
    @include flex(column, space-between);
    box-sizing: border-box;

    .member {
      @include font('light', normal, 28px);
    }

    .title {
      width: 100%;
      @include flex(row, space-between, center);

      .classname {
        width: 450px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        @include font('normal', bold);
      }
    }
  }
}

.join_item_hover {
  box-shadow: 0px 7px 20px 0 $shadow-color;
  transform: scale(0.99);
}